<template>
    <div class="chart-container">
        <div class="chart-title-wrapper">
            <div class="chart-title-block"></div>
            <div class="chart-title" style="opacity:1;">计划启动比</div>
            <div class="btn-wrapper">
                <div :class="activeTab=='notStart'?'btn-item active':'btn-item'" 
                @click="handleTab('notStart')">未启动项目</div>
                <div :class="activeTab=='started'?'btn-item active':'btn-item'" 
                @click="handleTab('started')">已启动项目</div>
            </div>
        </div>
        <div class="chart-content-wrapper">
            <div id="plan-start-num-chart" class="chart-content"></div>
            <div class="chat-list-wrapper">
                <div class="chat-list">
                    <div v-if="activeTab=='notStart'">
                        <div class="chart-list-title-wrapper">
                            <div class="chart-list-title">
                                <div class="chart-list-dat"></div>
                                <div class="chart-list-label">未启动项目</div>
                            </div>
                            <div class="chart-list-num">{{notStartArr.length}}个</div>
                        </div>
                        <div v-for="(item,key) in notStartArr" :key="'notStart-'+key" class="chart-list-item">
                            {{item}}
                        </div>
                    </div>
                    <div  v-if="activeTab=='started'">
                        <div class="chart-list-title-wrapper">
                            <div class="chart-list-title">
                                <div class="chart-list-dat"></div>
                                <div class="chart-list-label">已启动项目</div>
                            </div>
                            <div class="chart-list-num">{{startArr.length}}个</div>
                        </div>
                        <div v-for="(item,key) in startArr" :key="'start-'+key" class="chart-list-item">
                            {{item}}
                        </div>
                    </div>
                </div>

                <div class="line-image-wrapper">
                    <img src="../assets/line.png" alt="" class="line-image">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { circlechart,cycledrow } from '@/utils/chart.js';
import { getAreaPlanStart } from '@/api/index.js';
export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        },
        activeArea: {
            type: String
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        }
    },
    data() {
        return {
            activeTab:'notStart',
            notStartArr:[],
            startArr:[]
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            cycledrow('plan-start-num-chart',function(){
                _this.getTableData();
            });
        });
    },
    methods: {
        handleTab(target){
            this.activeTab=target;
        },
        getTableData(){
            var _this=this;
            getAreaPlanStart({
                id:this.activeArea,
                year:this.year
            }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    _this.resetData(data);
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        resetData(data){
            var notStartNum=data.notInitiated;
            var startNum=data.start;
            this.notStartArr=data.notInitiatedList;
            this.startArr=data.startList;
            var params={
                id:'plan-start-num-chart',
                label:["未启动","已启动"],
                data:[
                    {value:notStartNum,name:"未启动"},
                    {value:startNum,name:"已启动"}
                ]
            }
            circlechart(params);
        }
    }
}
</script>

<style scoped>
.chart-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.chart-content-wrapper{
    flex:1;
    height:0px;
    width:100%;
    display: flex;
}
.chart-content{
    flex:1;
    height:100%;
}
.chat-list-wrapper{
    flex:1;
    height:100%;
    display:flex;
    flex-direction: column;
    padding-bottom:40px;
    position:relative;
}
.chat-list{
    flex:1;
    height:0px;
    overflow-x:hidden;
    overflow-y:auto;
}
.chat-list::-webkit-scrollbar {
  width: 10px;
}
.chat-list::-webkit-scrollbar-track {
  background-color: #657180;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.chat-list::-webkit-scrollbar-thumb {
  background-color: #c3cbd6;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.line-image-wrapper{
    position:absolute;
    top:0px;
    left:-17px;
}
.line-image{
    width:6px;
    height:100%;
}
.chart-title-wrapper{
    width:97%;
    margin:0 auto;
    height:80px;
    display:flex;
    justify-content: space-between;
    position:relative;
}
.chart-list-title-wrapper{
    display:flex;
    justify-content: space-between;
    padding-right:20px;
}
.chart-list-title{
    display:flex;
    align-items: center;
}
.chart-list-dat{
    width: 10px;
    height: 10px;
    background: #FDDA6B;
    border-radius:50%;
    margin-right:7px;
}
.chart-list-label{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #F9E97D;
}
.chart-list-item{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #FFFFFF;
    margin-top:10px;
    display:flex;
    padding-left:17px;
    flex-wrap: nowrap;
}
.chart-list-num{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #F9E97D;
}
.chart-title-block{
    width: 255px;
    height: 38px;
    background: linear-gradient(90deg, #05FCFC 0%, #171B26 100%);
    opacity: 0.28;
    position:relative;
    left:30px;
    top:35px;
}
.chart-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F4F5;
    line-height: 33px;
    letter-spacing: 3px;
    position: absolute;
    top:36px;
    left:39px;
    white-space: nowrap;
}
.btn-wrapper{
    position:relative;
    top:35px;
    right:25px;
    display:flex;
}
.btn-item{
    padding:0px 10px 0px 10px;
    height: 33px;
    border: 1px solid #04B2B8;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 33px;
    text-align:center;
}
.btn-item:hover{
    cursor:pointer;
    opacity:0.8;
}
.active{
    background: #02D0D1;
}
</style>


